<template>
    <!--容器大小-->
    <div id="excel">
        <div id="select">
        <div  style="margin-bottom:5px;height:40px">
            <div id="example-5">
                <select v-model="startselected" style="height: 30px">
                    <option disabled value="">起始日期</option>
                    <option>2021-11-09 00:00:00</option>
                    <option>2021-11-10 00:00:00</option>
                    <option>2021-11-11 00:00:00</option>
                    <option>2021-11-12 00:00:00</option>
                    <option>2021-11-13 00:00:00</option>
                    <option>2021-11-14 00:00:00</option>
                    <option>2021-11-15 00:00:00</option>
                    <option>2021-11-16 00:00:00</option>
                    <option>2021-11-17 00:00:00</option>
                    <option>2021-11-18 00:00:00</option>
                    <option>2021-11-19 00:00:00</option>
                    <option>2021-11-20 00:00:00</option>
                    <option>2021-11-21 00:00:00</option>
                    <option>2021-11-22 00:00:00</option>
                </select>
                <select v-model="endselected" style="height: 30px">
                    <option disabled value="">结束日期</option>
                    <option>2021-11-11 00:00:00</option>
                    <option>2021-11-12 00:00:00</option>
                    <option>2021-11-13 00:00:00</option>
                    <option>2021-11-14 00:00:00</option>
                    <option>2021-11-15 00:00:00</option>
                    <option>2021-11-16 00:00:00</option>
                    <option>2021-11-17 00:00:00</option>
                    <option>2021-11-18 00:00:00</option>
                    <option>2021-11-19 00:00:00</option>
                    <option>2021-11-20 00:00:00</option>
                    <option>2021-11-21 00:00:00</option>
                    <option>2021-11-22 00:00:00</option>
                    <option>2021-11-23 00:00:00</option>
                </select>
                <button v-on:click="getData" style="margin-left: 5px; height: 30px">确定</button>
                <button v-on:click="update" style="margin-left: 5px; height: 30px">从新选择</button>
            </div>

        </div>
        </div>
        <div id="main">
            <DataGrid style="height:650px;"
                      :pagination="true"
                      :data="data"
                      :total="total"
                      :pageSize="pageSize">
                <GridColumn field="itemid" title="ID" :sortable="true" align="center"></GridColumn>
              <!--  <GridColumn field="WD" title="温度" :sortable="true"></GridColumn>
                <GridColumn field="GQ" title="光强" align="right" :sortable="true"></GridColumn>-->
                <GridColumn field="SD" title="湿度" align="center" :sortable="true" ></GridColumn>
                <GridColumn field="DATA" title="时间" align="center" :sortable="true" ></GridColumn>
            </DataGrid>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                total: 1000,
                data: [],
                pageSize: 10,
                startselected:'',
                endselected:'',
            };
        },

    mounted() {
            this.getData();

    },
        methods:{
            getData(){
                console.log(this.startselected)
                console.log(this.endselected)
                const axios = require('axios');
                axios.get('http://47.113.217.47:9095/SmartAG/view/viewTodayHumidity', {
                    params: {
                        date1: this.startselected,
                        date2: this.endselected,
                    }
                }).then(result=>
                    {
                        function renderTime(date) {
                            var dateee = new Date(date).toJSON();
                            return new Date(+new Date(dateee) + 0 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
                        }
                        console.log("获取最新的数据excel")
                        console.log(result.data)
                        console.log("获取最新的数据excel")
                        for (let i = 0; i <= result.data.length; i++) {
                            let id = result.data[i].id;
                            // let wd = result.data[i].temperatureData;
                            // let gq = result.data[i].lightData;
                            let sd = result.data[i].humidity;
                            let data = renderTime(result.data[i].date);
                            this.data.push({
                                itemid: id,
                                // WD: wd,
                                // GQ: gq,
                                SD: sd,
                                DATA:data
                            });
                        }
                    }
                );
            },//方法getData结束

            update: function () {
                // 在需要用到的事件中调用this.reload()；函数即可
                this.$router.go(0)
            }
            },

    }
</script>

<style scoped>
    #excel{
        float: left;
        width: 1450px;
        /* width: 100%;*/
        height: 600px;
    }
    #select{
        width: 1450px;
        height: 50px;
        background-color: #447fbc;
        color: aliceblue;
    }
</style>
